<template>
  <div v-show="visible" class="context-menu" :style="style">
    <div 
      class="menu-item" 
      @click="emit('command', 'open')" 
      v-if="selectedItem && 'type' in selectedItem && selectedItem.type === 'folder'"
      v-permission="'system:oss:view'"
    >
      <el-icon><FolderOpened /></el-icon>打开
    </div>
    <div 
      class="menu-item" 
      @click="emit('command', 'preview')" 
      v-if="selectedItem && isPreviewable"
      v-permission="'system:oss:doPreview'"
    >
      <el-icon><View /></el-icon>预览
    </div>
    <div 
      class="menu-item" 
      @click="emit('command', 'download')" 
      v-if="selectedItem && 'type' in selectedItem && selectedItem.type !== 'folder'"
      v-permission="'system:oss:doDownload'"
    >
      <el-icon><Download /></el-icon>下载
    </div>
    <div 
      class="menu-item" 
      @click="emit('command', 'delete')" 
      v-permission="'system:oss:doDelete'"
    >
      <el-icon><Delete /></el-icon>删除
    </div>
    <div 
      class="menu-item" 
      @click="emit('command', 'info')" 
      v-if="selectedItem && 'type' in selectedItem"
      v-permission="'system:oss:getInfo'"
    >
      <el-icon><InfoFilled /></el-icon>{{ selectedItem.type === 'folder' ? '属性' : '详情' }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { FolderOpened, Download, Delete, InfoFilled, View } from '@element-plus/icons-vue'
import type { OSSFile, OSSDirectory } from '../types'
import { isPreviewableType } from '../types'

const props = defineProps<{
  visible: boolean
  style: { top: string; left: string }
  selectedItem: OSSFile | OSSDirectory | null
}>()

// 判断是否可预览
const isPreviewable = computed(() => {
  if (!props.selectedItem || !('type' in props.selectedItem)) return false
  return isPreviewableType(props.selectedItem.type, props.selectedItem.extension)
})

const emit = defineEmits<{
  (e: 'command', command: string): void
}>()
</script>

<style scoped lang="scss">
.context-menu {
  position: fixed;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 3000;

  .menu-item {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    
    &:hover {
      background-color: #f5f7fa;
    }

    .el-icon {
      margin-right: 8px;
    }
  }
}
</style> 